<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    <link rel="stylesheet" href="../css/base/index.css" >
    <link rel="stylesheet" href="../css/demos.css" >
    <link rel="stylesheet" href="../css/styletree.css" >
    <link rel="stylesheet" href="../css/ui.dynatree.css">

    <!--<script src="../js/snap.svg-min.js"></script>-->
    <script type="text/javascript" charset="utf-8" src="../js/color.js"></script>
    <script src="../js/snap.svg.js"></script>
    <script src="../js/drag.js"></script>
    <script src="../js/getScrollOffsets.js"></script>
    <script src="../js/color.js"></script>
    <script src="../js/d3.js"></script>
    <script src="../js/nv.d3.min.js"></script>
    <script src="../js/data.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/jquery-1.11.0.min.js"></script>
    <script src="../js/jquery-ui.custom.js" type="text/javascript"></script>
    <script src="../js/jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8" src="../js/jquery.jeditable.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/KeyTable.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/jquery.dd.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/jstree.js"></script>

    <script type="text/javascript" charset="utf-8" src="../js/jquery.dynatree.js"></script>
    <script src="../js/Chart.js"></script>

<title>地图制图</title>

<!--mouseover颜色-->
<script type="text/javascript">
            var clicknum=0;
            var layerisrefresh=true;
		    function highlight1(){
		    var a= document.getElementById("img1");
			a.src="../css/base/img/shang1.png";
		    }
            function clicklayercontrol()
            {
                if(layerisrefresh)
                {
                    $("#layer_control").dynatree({
                        imagePath: "skin-custom/"
                    });
                    $('#layer_control').attr("style","visibility:visible");
                    layerisrefresh=false;
                }
                if(clicknum%2==0)
                {
                    $("#layer_control").attr("style","display:block");
                }
                else
                    $("#layer_control").attr("style","display:none");
                clicknum++;
            }
			function highlightback1(){
				var a= document.getElementById("img1");
				a.src="../css/base/img/shang.png";
		    }
			 function highlight2(){
		    var a= document.getElementById("img2");
			a.src="../css/base/img/zhong1.png";
            //$("#layer_control").attr("style","display:block");
		    }
			function highlightback2(){
				var a= document.getElementById("img2");
				a.src="../css/base/img/zhong.png";
                //$("#layer_control").attr("style","display:none");
		    }
			 function highlight3(){
		    var a= document.getElementById("img3");
			a.src="../css/base/img/xia1.png";
		    }
			function highlightback3(){
				var a= document.getElementById("img3");
				a.src="../css/base/img/xia.png";
		    }
			function highlight4(){
		    var a= document.getElementById("img4");
			a.src="../css/base/img/jia1.png";
		    }
			function highlightback4(){
				var a= document.getElementById("img4");
				a.src="../css/base/img/jia.png";
		    }
			function highlight5(){
		    var a= document.getElementById("img5");
			a.src="../css/base/img/jian1.png";
		    }
			function highlightback5(){
				var a= document.getElementById("img5");
				a.src="../css/base/img/jian.png";
		    }
			function highlight6(){
		    var a= document.getElementById("img6");
			a.src="../css/base/img/quanping1.png";
		    }
			function highlightback6(){
				var a= document.getElementById("img1");
				a.src="../css/base/img/quanping.png";
		    }
			
</script>
</head>

<body>
    <div id="header">
           <div id="logo"><img src="../css/base/img/logo.png" /></div>
           <div id="header-center1">
                <ul id="header-center2">
                    <li id="header-center-ul-li01" onClick="func()"><a href="#">加载</a></li>
                    <li id="header-center-ul-li02" ><a href="#">色带</a></li>
                    <li id="header-center-ul-li03" onclick="draw()"><a href="#">绘制</a></li>
                    <li id="header-center-ul-li04" onclick="download()"><a href="#">保存</a></li>
                    <li id="header-center-ul-li05"><a href="#" id="downloadlink">另存为</a></li>
                    <li id="header-center-ul-li06" onclick="panandsacle()"><a href="#">漫游</a></li>
                    <li id="header-center-ul-li07" onclick="scaleall()"><a href="#">全图</a></li>
                    <li id="header-center-ul-li08" onclick="edit()"><a href="#">编辑</a></li>
                    <li id="header-center-ul-li09" onclick="refresh()"><a href="#">更新</a></li>
                    <li id="header-center-ul-li10"><input type="file" name="fileupload" id="fileuploadbtn" onchange="fileUploadReadText(this.files)" /></li>
                </ul>
           </div>
           <div id="header-right">
                 <ul id="header-right-text">
                       <li><a href="#">赞助</a></li>
                       <li><a href="#">帮助</a></li>
                       <li><a href="#">关于</a></li>
                 </ul>
                 <div id="header-right-login">
                        <div id="span1"><a href="#">登录</a></div>
                        <div id="span2"><a href="#">注册</a></div>
                 </div>
           </div> 
      </div>
      <div id="header-center">
         <ul id="header-center-ul" class="tabs">
                <li id="header-center-ul-li1" class="active" ><a href="#tab_map">地图</a></li>
                <li id="header-center-ul-li2"><a href="#tab_data">数据</a></li>
         </ul>
      </div>  
   <div id="content">
   <!--左边的悬浮框-->
         <div id="xuanfu-left">
              <ul>
                 <li  onMouseOver="highlight1()" onMouseOut="highlightback1()"><a href="#"><img id="img1" src="../css/base/img/shang.png" /></a></li>
                 <li onclick="clicklayercontrol()" onMouseOver="highlight2()" onMouseOut="highlightback2()"><a href="#"><img id="img2" src="../css/base/img/zhong.png" /></a></li>
                 <li  onMouseOver="highlight3()" onMouseOut="highlightback3()"><a href="#"><img id="img3" src="../css/base/img/xia.png" /></a></li>
              </ul>
         </div>
   <!--右边的悬浮框-->
         <div id="xuanfu-right">
              <a href="#"><img src="../css/base/img/pen.png"/></a>
         </div>
   </div>
   
  <div class="tab_container">
        <div id="tab_map" class="tab_content" style="display: block; ">
            <div id="layer_control" style="display: block">

            </div>
            <div id="svg_div">
            </div>
        </div>
        <div id="tab_data" class="tab_content" style="display: none; ">
            <p/><p/><p/>
            <input class="search" placeholder="Search" id="searchText"/>
            <button class="button" data-sort="name" id="searchButton" onclick="search()">
                搜索
            </button>
            <button class="button" data-sort="name" id="deleteButton" onclick="reset()">
                还原
            </button>
            <table id="datatable" class="display KeyTable">
                    <thead>
                    </thead>
                    <tbody>
                    </tbody>
            </table>
         </div>
   </div>
   <div id="bottom">
       <ul>
           <li onMouseOver="highlight4()" onMouseOut="highlightback4()"><a href="#"><img id="img4" src="../css/base/img/jia.png" /></a></li>
           <li onMouseOver="highlight5()" onMouseOut="highlightback5()"><a href="#"><img id="img5" src="../css/base/img/jian.png" /></a></li>
           <li onMouseOver="highlight6()" onMouseOut="highlightback6()"><a href="#"><img id="img6" src="../css/base/img/quanping.png" /></a></li>
       </ul>
   </div>
   
<script>
    var dataload;
    var globalscale=1.0;
    var iniWidth=0;
    var iniHeight=0;
    var screenWidth=1100;
    var screenHeight=700;
    var iconSelect;
    var svgname="";
    $(document).ready(function() {
        var colorselect=$("#colorband");
        for(i=0;i<10;i++)
        {
            colorselect.append('<option value="Discover" data-image="../resources/svg/'+colormap[i]+'.png" data-description="'+colormap[i]+'"></option>');
        }
       
        $(".tab_content").hide(); 
        $("ul.tabs li:first").addClass("active").show(); 
        $(".tab_content:first").show(); 

        $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active"); 
            $(this).addClass("active"); 
            $(".tab_content").hide(); 
            var activeTab = $(this).find("a").attr("href"); 
            $(activeTab).fadeIn();
            return false;
        });
        $("select").msDropdown({roundedBorder:false});
    });

    function turntomap()
    {
        $("#tab_data").setAttribute("style","display:none");
        $("#tab_map").setAttribute("style","display:block");
    }
    function turntodata()
    {
        $("#tab_map").setAttribute("style","display:none");
        $("#tab_data").setAttribute("style","display:block");
    }
    function refreshcolorselect()
    {
        var colorselect=$("#colorband");
        for(i=0;i<10;i++)
        {
            colorselect.append('<option value="Discover" data-image="../resources/svg/'+colormap[i]+'.svg" data-description="'+colormap[i]+'"></option>');
        }
        $("select").msDropdown({roundedBorder:false});
    }
    function refresh()
    {
        var rows=document.getElementById("datatable").rows;
        datanew=[];
        for(i=0;i<rows.length;i++)
        {
            var cells=rows[i].cells;
            var one=[];
            for(j=0;j<cells.length;j++)
            {
                var trans=parseFloat(cells[j].innerHTML);
                if(isNaN(trans))
                    one.push(cells[j].innerHTML);
                else
                    one.push(trans);
            }
            datanew.push(one);
        }
        dataload=datanew;
        if( Snap("#graphicgen")!=null){
        Snap("#graphicgen").remove();
        }
    }

    function reset()
    {
        var rows=$("#datatable tbody tr");
        for(i=0;i<rows.length;i++)
        {
            if(i%2==0)
                rows[i].setAttribute("class","odd_gradeA");
            else
                rows[i].setAttribute("class","odd_gradeC");
            Snap("#Pie"+(i+1)).attr({visibility:"visible"});
        }
    }

    function search()
    {
        var searchString=$("#searchText").val();
        if(!searchString.match(/.+\W+.+/))
        {
            alert("查询条件非法！");
            return;
        }
        var chars=searchString.match(/\W+/)[0];
        var index=searchString.indexOf(chars);
        var sclass=searchString.substring(0,index);
        var snum=searchString.substring(index+chars.length);
        if(snum.match(/\d+/))
            snum=parseFloat(snum);
        var rows=$("#datatable tbody td."+sclass);
        var lines=$("#datatable tbody td."+sclass).parent();

        for(one=0;one<rows.length;one++)
        {
            switch(chars)
            {
                case "==":
                    if(rows[one].innerHTML==snum)
                    {
                        lines.get(one).setAttribute("class","odd_gradeX");
                        Snap("#Pie"+(one+1)).attr({visibility:"visible"});
                    }
                    else{
                        Snap("#Pie"+(one+1)).attr({visibility:"hidden"});
                    }
                    break;
                case " > ":
                    if(rows[one].innerHTML>snum)
                    {
                        lines.get(one).setAttribute("class","odd_gradeX");
                        Snap("#Pie"+(one+1)).attr({visibility:"visible"});
                    }
                    else{
                        Snap("#Pie"+(one+1)).attr({visibility:"hidden"});
                    }
                    break;
                case "<":
                    if(rows[one].innerHTML<snum)
                    {
                        lines.get(one).setAttribute("class","odd_gradeX");
                        Snap("#Pie"+(one+1)).attr({visibility:"visible"});
                    }
                    else{
                        Snap("#Pie"+(one+1)).attr({visibility:"hidden"});
                    }
                    break;
                case ">=":
                    if(rows[one].innerHTML>=snum)
                    {
                        lines.get(one).setAttribute("class","odd_gradeX");
                        Snap("#Pie"+(one+1)).attr({visibility:"visible"});
                    }
                    else{
                        Snap("#Pie"+(one+1)).attr({visibility:"hidden"});
                    }
                    break;
                case "<=":
                    if(rows[one].innerHTML<=snum)
                    {
                        lines.get(one).setAttribute("class","odd_gradeX");
                        Snap("#Pie"+(one+1)).attr({visibility:"visible"});
                    }
                    else{
                        Snap("#Pie"+(one+1)).attr({visibility:"hidden"});
                    }
                    break;
            }
        }
    }

    function fileUploadReadText(f)
    {
        if(typeof FileReader=='undefined')
        {
            alert("浏览器不支持！");
        }
        var tempFile=f[0];
        var reader=new FileReader();
        reader.readAsText(tempFile,"GBK");
        reader.onload=function(e)
        {
            dataload=readData(e.target.result,false);
            if(dataload.length>=1)
            {
                var headstring='<tr class="ui-widget-header ">';
                for(i=0;i<dataload[0].length;i++)
                headstring=headstring+'<th class='+dataload[0][i]+'>'+dataload[0][i]+'</th>';
                headstring+="</tr>";
                $("#datatable thead").append(headstring);
                for(i=1;i<dataload.length;i++)
                {
                    onestring="";
                    if(i%2==0)
                        onestring='<tr class="odd_gradeA">';
                    else onestring='<tr class="odd_gradeC">';
                    for(j=0;j<dataload[i].length;j++)
                        onestring=onestring+"<td class="+dataload[0][j]+">"+dataload[i][j]+"</td>";
                    $("#datatable tbody").append(onestring);
                }
            }
            var keys = new KeyTable( {
                "table": document.getElementById('datatable')
            } );

         
            $('#datatable tbody td').each( function () {
                keys.event.action( this, function (nCell) {
               
                    keys.block = true;

                    $(nCell).editable( function (sVal) {
                    
                        keys.block = false;
                        return sVal;
                    }, {
                        "onblur": 'submit',
                        "onreset": function(){
                  
                            setTimeout( function () {keys.block = false;}, 0);
                        }
                    } );
               
                    setTimeout( function () { $(nCell).click(); }, 0 );
                } );
            } );
        }
    }

    function download()
    {
        a=document.getElementById("downloadlink");
        var win=window.open();
        win.document.write(Snap("#"+svgname).paper.toString());
    }

    function draw()
    {
        color=getColor(colormap["0RG03X02"]);
        //color=[Snap.rgb(51,204,51),Snap.rgb(255,204,0),Snap.rgb(204,102,255),Snap.rgb(255,255,0),Snap.rgb(0,255,255),Snap.rgb(255,0,255)];
        labels=["第一产业","第二产业","第三产业","","",""];
        var legend=Legend("#"+svgname,"legend_pie_1",800,800,55000,55000,20000,color,labels,"图例",5000,dataload[dataload.length-1]);
        Snap("#图例").add(legend);
//        var drag = d3.behavior.drag()
//                .origin(function(d) { return d; })
//                .on("drag", calldragmove);
//        d3.select(document.getElementById("图例")).call(drag);
        var group = Snap("#地图").g();
        group.attr({id:"graphicgen"});
        var totalvalue=dataload.map(function total(d){
            return d[2]+d[3]+d[4];
        });
        totalvalue=totalvalue.slice(1);
        var rate=Rating(totalvalue,5,"equalDiff");
        var sizearray=getCData(6000,10000,totalvalue);
        for(i=1;i<dataload.length;i++)
        {
            var code=dataload[i][1];
            var code_s=code.toString();
            if(code<10)
             code_s="0"+code;
            var e=document.getElementById("Prov_P"+code_s);
            var areaone=document.getElementById("Prov_R"+code_s);
            if(areaone.children.length==0)
                setcolor("Prov_R"+code_s,colormap["1BB06X04"][rate["type"][i-1]]);
            else
                setcolor2("Prov_R"+code_s,colormap["1BB06X04"][rate["type"][i-1]]);
            var X=parseInt(e.getAttribute("cx"));
            var Y=parseInt(e.getAttribute("cy"));
            var graph=pieChart("#"+svgname,"Pie"+i,dataload[i],500,500,X,Y,sizearray[i-1],color);
            graph.drag();
            group.add(graph);
        }
    }

    function scaleout()
    {
        var svg=document.getElementById("地图");
        var svg2=Snap("#svgroot");
        globalscale-=0.1;
        svg2.attr({width:""+iniWidth*globalscale,height:""+iniHeight*globalscale});
        var swidth=svg.getAttribute("width");
        var sheight=svg.getAttribute("height");
        var width=parseInt(swidth.substr(0,swidth.length-1));
        var height=parseInt(sheight.substr(0,swidth.length-1));
        if(width<=10||height<=10)
        {
            alert("已缩放至最小比例");
            return;
        }
        width=width-10;
        height=height-10;
        svg.setAttribute("width",width+"%");
        svg.setAttribute("height",height+"%");
    }

    function scalein()
    {
        var svg=document.getElementById("地图");
        var svg2=Snap("#svgroot");
        globalscale+=0.1;
        svg2.attr({width:""+iniWidth*globalscale,height:""+iniHeight*globalscale});
        var swidth=svg.getAttribute("width");
        var sheight=svg.getAttribute("height");
        var width=parseInt(swidth.substr(0,swidth.length-1));
        var height=parseInt(sheight.substr(0,swidth.length-1));
        if(width>=200||height>=200)
        {
            alert("已放大至最大比例");
            return;
        }
        width=width+10;
        height=height+10;
        svg.setAttribute("width",width+"%");
        svg.setAttribute("height",height+"%");

    }

    function calldragmove(d) {
        d.dx += d3.event.dx;
        d.dy += d3.event.dy;
        d3.select(this)
                .attr("transform","translate("+d.dx+","+d.dy+")");
    }



    function panandsacle()
    {
        var x = d3.scale.linear()
                .domain([0, 1500])
                .range([0, 1500]);
        var y = d3.scale.linear()
                .domain([0, 1500])
                .range([0, 1500]);
        var svg = d3.select("#"+svgname);
        var zoom = d3.behavior.zoom()		//创建一个缩放行为
                .x(x)
                .y(y)
                .scaleExtent([0.5, 20])	//设置缩放的范围
                .on("zoom", function(d){
                    d3.select(this).attr("transform",
                            "translate(" +d3.event.translate + ")" +	//平移量
                            "scale(" + d3.event.scale + ")");	//缩放量
                });
        var g=svg.select("#地图");
        g.call(zoom);
    }

    function scaleall()
    {
        d3.select("#地图").attr("transform",
                "translate(0,0)" +	
                "scale(1)");	
    }

    function edit()
    {
        var svg = d3.select("#"+svgname);
        var g=svg.select("#地图");
        var zoom = d3.behavior.zoom()		
                .on("zoom", function(d){
                });
        g.call(zoom);
    }
    function func()
    {
        if( Snap("svg")!=null){
            Snap("svg").remove();
        }
        Snap.load("../resources/svg/map1.svg", function (svg) {
            this.appendChild(svg.node);
            var svg=Snap("#all_1400_ecotemp");
            var widthstring=svg.attr("width");
            var heightstring=svg.attr("height");
            iniWidth=parseFloat(widthstring.substr(0,widthstring.length-2));
            iniHeight=parseFloat(heightstring.substr(0,heightstring.length-2));
            var scalewidth=screenWidth/iniWidth;
            var scaleheight=screenHeight/iniHeight;
            var scale=scaleheight<scalewidth?scaleheight:scalewidth;
            svg.attr({width:iniWidth*scale+"px",height:iniHeight*scale+"px"});
            svgname=svg.attr("id");
            $("#layer_control").innerHTML = xmlTree(svg);
            $("#layer_control").dynatree({
                imagePath: "skin-custom/"
            });
        }, document.getElementById("svg_div"));

        refreshcolorselect();
    }
</script>
</body>
<script src="../js/main.js"></script>
</html>
